<!--
@Descripttion 选择器-级联 (待完善)
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import FSelectCascader from '@/components/form/f-select-cascader'
  注册组件
    components: {
      FSelectCascader
    }
  使用
    <FSelectCascader v-model.trim="xxx" :options="[]" />
    <FSelectCascader v-model.trim="xxx" @label="(v)=>{xxx=v}" :options="[]" api="" changeGetData="fasle" :props="{value: 'value', label: 'label', children: 'children'}" width="220px" :disabled="false" placeholder="请选择" :change-on-select="false" />
    @label Function 选填(v)=>{} 修改选中值的回调函数,函数传入的参数为被选中的label值
    options          Object   默认值([])                                                     备选列表 格式:[{value: '', label: '', children: []}]
    api              String   默认值('')                                                     远程接口地址(可单独使用，直接从后台获取数据)
    changeGetData    Boolean  默认值(false)                                                  是否动态加载次级选项 配合api参数使用
    props            Object   默认值({value: 'value', label: 'label', children: 'children'}) 指定字段名称
    width            String   默认值(220px)                                                  输入框宽度
    disabled         Boolean  默认值(false)                                                  是否失效
    placeholder      String   默认值(请选择)                                                  默认占位文本
    change-on-select Boolean  默认值(false)                                                  选择立即改变
 -->
<template>
  <el-cascader
    :value="value"
    @change="changeVal"
    @clear="clearVal"
    @focus="initList"
    @active-item-change="handleItemChange"
    :options="list"
    :props="props"
    clearable
    :style="`width: ${width}`"
    :disabled="disabled"
    :placeholder="placeholder"
    :change-on-select="changeOnSelect"
    >
  </el-cascader>
</template>

<script>
import { methodPost } from '@/api'

export default {
  name: 'f-select-cascader',
  props: {
    value: {
      required: true
    },
    // 备选列表 格式:[{value: '', label: '', children: []}]
    options: {
      type: Array,
      default: () => []
    },
    // 远程地址
    api: {
      type: String,
      default: ''
    },
    // 是否动态加载次级选项 配合api参数使用
    changeGetData: {
      type: Boolean,
      default: false
    },
    // 指定字段名称
    props: {
      type: Object,
      default() {
        return {
          value: 'value',
          label: 'label',
          children: 'children'
        }
      }
    },
    // 输入框宽度
    width: {
      type: String,
      default: '220px'
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.Please select')
      }
    },
    // 选择立即改变
    changeOnSelect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.initList()
  },
  methods: {
    changeVal(value) {
      this.$emit('input', value)
      const labelList = []
      let list = this.list
      const getLabel = (val) => {
        for (const item of list) {
          if (val === item[this.props.value]) {
            labelList.push(item[this.props.label])
          }
          list = item[this.props.children]
        }
      }
      for (const val of value) {
        getLabel(val)
      }
      this.$emit('label', labelList)
    },
    clearVal() {
      this.$emit('label', null)
    },
    /**
     * 初始化下拉框值
     */
    initList() {
      if (this.api) {
        if (this.list.length === 0) {
          methodPost(this.api, {}).then((res) => {
            this.list = res.result
          })
        }
      } else {
        this.list = this.options
      }
    },
    /**
     * 动态加载次级选项
     */
    handleItemChange(val) {
      if (this.changeGetData) {
        // 待开发
      }
    }
  }
}
</script>
